﻿<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.ext.css" rel="stylesheet" />
<link href="../css/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="../css/bootstrap-year-calendar/bootstrap-year-calendar.min.css" rel="stylesheet" />
<link href="../css/switchery/switchery.css" rel="stylesheet" />
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.min.js"></script>
<script src="../js/plugins/linq/linq.js"></script>
<script src="../weixin/js/common.js"></script>
<script src="../js/plugins/bootstrap-datetimepicker/js/bootstrap-datepicker.min.js"></script>
<script src="../js/plugins/bootstrap-popover/bootstrap-popover.js"></script>
<script src="../js/plugins/bootstrap-year-calendar/bootstrap-year-calendar.js"></script>
<script src="../js/tableToExcel.js"></script>
<script src="../js/plugins/switchery/switchery.js"></script>
<style>
    .system-box .right-side {
        width: 100%;
    }
    #calendar {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #calendar .month-container {
        height: 220px;
    }

    #calendar .calendar-header {
        margin-bottom: 15px;
    }
    .switchery{
        height: 20px;
        width: 40px;
    }
    .switchery > small{
        height: 20px;
        width: 20px;
    }
    .pull-right {
        margin-right:10px
    }
</style>
<html>
<head>
    <title>节假日设置</title>
</head>
<body>
    <div class="system-box">
        <div class="right-side">
            <div class="btns-container">
                <button type="button" class="btn btn-sm btn-primary m-t-n-xs pull-left" id="save-Btn">保存</button>
            </div>
            <article class="htmleaf-container">
                <div id="calendar"></div>
                <input type="hidden" id="nowYear" />
            </article>
        </div>

        <div class="modal modal-fade" id="event-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title">节日设置</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="event-index" value="">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="min-date" class="col-sm-2 control-label">节日名称</label>
                                <div class="col-sm-9">
                                    <input id="dateName" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="min-date" class="col-sm-2 control-label">日期区间</label>
                                <div class="col-sm-9">
                                    <div class="input-group input-daterange" data-provide="datepicker">
                                        <input name="event-start-date" readonly="readonly"
                                            type="text" class="form-control" data-date-format="yyyy-mm-dd" />
                                        <span class="input-group-addon">to</span>
                                        <input name="event-end-date" readonly="readonly"
                                            type="text" class="form-control" data-date-format="yyyy-mm-dd" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="min-date" class="col-sm-2 control-label">非节假日</label>
                                <div class="col-sm-9">
                                    <input type="checkbox" class="js-switch" id="isAllMonth"/>&nbsp&nbsp
                                    <label>计算整月</label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="delete">删除</button>
                        <button type="button" class="btn btn-primary" id="save">设置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    var dayName = '';
    var tempStartDate = [];
    var tempEndDate = [];
    
    var isAllMonthBtn = new Switchery($("#isAllMonth")[0],
        {
            color: "#1AB394"
        });

    function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }

    //编辑事件
    function editEvent(event) {
        setSwitchery(isAllMonthBtn, false);
        var dataSource = $('#calendar').data('calendar').getDataSource();
        $('#delete').hide();
        for (var i in dataSource) {
            if (!Y.checkNull(dataSource[i].startDate) && !Y.checkNull(dataSource[i].endDate)) {
                if (dataSource[i].startDate.getTime() == event.startDate.getTime() && dataSource[i].endDate.getTime() == event.endDate.getTime()) {
                    //显示删除按钮
                    $('#delete').show();
                    if (dataSource[i].isAllMonth) {
                        setSwitchery(isAllMonthBtn, true);
                    } else {
                        setSwitchery(isAllMonthBtn, false);
                    }
                    break;
                }
            }
        }
        $('#event-modal input[name="event-index"]').val(event ? event.id : '');
        $('#dateName').val(event ? event.name : '');
        $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
        $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
        $('#event-modal').modal();
    }
    //删除事件
    function deleteEvent(event) {
        tempStartDate = [];
        tempEndDate = [];
        var dataSource = $('#calendar').data('calendar').getDataSource();
        for (var i = dataSource.length - 1; i >= 0; i--) {
            if (!Y.checkNull(dataSource[i].startDate) && !Y.checkNull(dataSource[i].endDate)) {
                if (dataSource[i].startDate.getTime() <= event.endDate.getTime() && dataSource[i].endDate.getTime() >= event.startDate.getTime()) {
                    tempStartDate.push(dataSource[i].startDate);
                    tempEndDate.push(dataSource[i].endDate);
                    dataSource.splice(i, 1);
                }
            }
        }
        $('#calendar').data('calendar').setDataSource(dataSource);
    }
    //保存事件
    function saveEvent() {
        var startTime = $('#event-modal input[name="event-start-date"]').datepicker('getDate');
        var endTime = $('#event-modal input[name="event-end-date"]').datepicker('getDate');
        deleteEvent({ startDate: startTime, endDate: endTime });
        var event = {
            tempStartDate: tempStartDate.length == 0 ? null : tempStartDate,
            tempEndDate: tempEndDate.length == 0 ? null : tempEndDate,
            name: $('#dateName').val(),
            startDate: startTime,
            endDate: endTime,
            isAllMonth: $("#isAllMonth")[0].checked,
            //		color:'#ff0000',
        }
        //	console.log('save',event.tempStartDate,'---------',event.tempEndDate);
        var dataSource = $('#calendar').data('calendar').getDataSource();
        dataSource.push(event);

        //	console.log(event);
        setTimeout(function () {
            $('#calendar').data('calendar').setDataSource(dataSource);
            $('#event-modal').modal('hide');
        }, 100)

    }

    //加载节日信息
    function loadList(year) {
        var s = layer.load(0, {
            shade: [0.2, '#fff'] //0.1透明度的白色背景
        });
        //Y.API2('Calendar', 'GetFestivalList', { Year: year }, function (data) {
        //    layer.closeAll('dialog');
        //    if (data.Success == false) {
        //        swal(data.Message, '', 'error');
        //    } else {
        //        var tempArr = [];
        //        data.map(function (item, i) {
        //            var sd = item.StartDate.split('-');
        //            var ed = item.EndDate.split('-');
        //            var temp = {
        //                name: item.TypeName,
        //                startDate: new Date(sd[0], parseInt(sd[1]) - 1, sd[2]),
        //                endDate: new Date(ed[0], parseInt(ed[1]) - 1, ed[2]),
        //                //					color:'#ff0000'
        //            };
        //            tempArr.push(temp);
        //        });
        //        $('#nowYear').val(year);
        //        $('#calendar').data('calendar').setDataSource(tempArr);
        //    }
        //})
        $.post("ShopPKHandler.ashx",
            {
                "action": "GetFestivalList",
                "Year": year,
            },
            function (data) {
                layer.close(s);
                if (data.Success == false) {
                    layer.alert(data.Message,
                        {
                            icon: 1,
                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        });
                } else {
                    var tempArr = [];
                    data.Data.map(function (item, i) {
                        var sd = item.StartDate.split('-');
                        var ed = item.EndDate.split('-');
                        var temp = {
                            name: item.TypeName,
                            startDate: new Date(sd[0], parseInt(sd[1]) - 1, sd[2]),
                            endDate: new Date(ed[0], parseInt(ed[1]) - 1, ed[2]),
                            isAllMonth: item.IsAllMonth,
                            //					color:'#ff0000'
                        };
                        tempArr.push(temp);
                    });
                    $('#nowYear').val(year);
                    $('#calendar').data('calendar').setDataSource(tempArr);
                }
            });
    }

    $(document).ready(function () {

        var calendar = $('#calendar').calendar({
            dealYear: { c: 'ShopPKHandler.ashx', a: 'GetFestivalList' },
            enableContextMenu: true,
            enableRangeSelection: true,
            contextMenuItems: [{
                text: 'Update',
                click: editEvent
            }, {
                text: 'Delete',
                click: deleteEvent
            }],
            selectRange: function (e) {
                editEvent({ startDate: e.startDate, endDate: e.endDate, name: dayName });
            },
            mouseOnDay: function (e) {
                dayName = '';
                if (e.events.length > 0) {
                    dayName = e.events[0].name;
                    var content = '';
                    for (var i in e.events) {
                        content += '<div class="event-tooltip-content">'
                            + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                            + '</div>';
                    }

                    $(e.element).popover({
                        trigger: 'manual',
                        container: 'body',
                        html: true,
                        content: content
                    });

                    $(e.element).popover('show');
                }
            },
            mouseOutDay: function (e) {
                if (e.events.length > 0) {
                    $(e.element).popover('hide');
                }
            },
            dayContextMenu: function (e) {
                $(e.element).popover('hide');
            },
            dataSource: []
        });

        //设置年限
        $('#calendar').data('calendar').setMinDate(new Date((new Date().getFullYear() - 2) + '-12-31'));
        $('#calendar').data('calendar').setMaxDate(new Date((new Date().getFullYear() + 5) + '-12-31'));
        loadList(new Date().getFullYear());

        //点击设置按钮
        $('#save').click(function () {
            if ($('#dateName').val().trim() == '')
                return false;
            saveEvent();
        });
        //点击删除按钮
        $('#delete').click(function () {
            var ev = {
                startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
            }
            deleteEvent(ev);
            var event = {
                tempStartDate: ev.startDate.length == 0 ? null : [ev.startDate],
                tempEndDate: ev.endDate.length == 0 ? null : [ev.endDate],
                name: $('#dateName').val(),
                startDate: null,
                endDate: null,
            }
            var dataSource = $('#calendar').data('calendar').getDataSource();
            dataSource.push(event);
            $('.modal-header .close').click();
        });
        //保存按钮
        $('#save-Btn').click(function () {
            var submitArr = [];
            var dataSource = $('#calendar').data('calendar').getDataSource();
            dataSource.map(function (item) {
                var temp = {
                    //				HolidayYearv: item.startDate.getFullYear(),
                    TypeName: item.name,
                    StartDate: Y.checkNull(item.startDate) ? '' : (item.startDate.getFullYear() + '-' + (item.startDate.getMonth() + 1) + '-' + item.startDate.getDate()),
                    EndDate: Y.checkNull(item.endDate) ? '' : (item.endDate.getFullYear() + '-' + (item.endDate.getMonth() + 1) + '-' + item.endDate.getDate()),
                    IsAllMonth: item.isAllMonth,
                }
                submitArr.push(temp);
            });
            //		console.log(submitArr);
            var s = layer.load(0, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            //Y.API2('Calendar', 'ModifyCalendar', { list: submitArr }, function (data) {
            //    layer.closeAll('dialog');
            //    loadList($('#calendar').data('calendar').getYear());
            //    if (data.Success == false) {
            //        swal(data.Message, '', 'error');
            //    } else {
            //        swal('保存成功', '', 'success');
            //    }
            //})
            $.post("ShopPKHandler.ashx",
                {
                    "action": "ModifyCalendar",
                    "Json": JSON.stringify(submitArr),
                },
                function (data) {
                    layer.close(s);
                    loadList($('#calendar').data('calendar').getYear());
                    if (data.Success == true) {
                        layer.alert('保存成功！',
                            {
                                icon: 1,
                                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                    } else {
                        layer.alert(data.Message,
                            {
                                icon: 1,
                                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                    }
                });
        })
    });

</script>

